<!DOCTYPE html>
<html lang="zh">
{include file="public/head"}
<body>
<div class="container-fluid">
  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">
          <div id="toolbar" class="toolbar-btn-action">
            <button id="btn_add" type="button" class="btn btn-primary me-1" onclick="openLayer('添加栏目', '/admin/admin/addAuthRule')">
              <span class="mdi mdi-plus" aria-hidden="true"></span>新增
            </button>
            <!-- <button id="btn_edit" type="button" class="btn btn-success me-1" onclick="batch(1)">
              <span class="mdi mdi-check" aria-hidden="true"></span>启用
            </button>
            <button id="btn_edit" type="button" class="btn btn-warning me-1" onclick="batch(2)">
              <span class="mdi mdi-block-helper" aria-hidden="true"></span>禁用
            </button>
            <button id="btn_delete" type="button" class="btn btn-danger" onclick="batch(3)">
              <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
            </button> -->
          </div>
          <table class="tree-table"></table>
          
        </div>
      </div>
    </div>

  </div>

</div>

{include file="public/script"}

<link href="/static/admin/js/jquery-treegrid/jquery.treegrid.min.css" rel="stylesheet">
<script type="text/javascript" src="/static/admin/js/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="/static/admin/js/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script type="text/javascript">
// tree-grid使用

var $treeTable = $('.tree-table');
$treeTable.bootstrapTable({
  //data: data,
  url:'/admin/admin/authRule',
  method:'post',
  idField: 'id',
  uniqueId: 'id',
  dataType: 'json',
  toolbar: '#toolbar2',
  columns: [
        {
      field: 'check',
      checkbox: true
    },
    {
      field: 'title',
      title: '名称'
    },
    {
      field: 'route',
      title: '路由'
    },
    {
      field: 'icon',
      title: 'icon图标'
    },
    {
      field: 'weigh',
      title: '排序'
    },
    {
      field: 'type',
      title: '类型',
      formatter: function(value, row, index) {
        if (value == 1) {
          return '<button class="btn btn-light btn-sm" type="button">菜单</button>';
        } else if (value == 2) {
          return '<button class="btn btn-success btn-sm" type="button">权限验证</button>';
        }
      },
    },
    {
      field: 'is_show',
      title: '是否显示为菜单',
      formatter: function(value, row, index) {
        if (value == 1) {
          return '是';
        } else if (value == 0) {
          return '否';
        }
      },
    },
    {
      field: 'status',
      title: '状态',
      /*
       * 可以选择采用开关来处理状态显示
       * 或者采用上个示例的处理方式
       */
      formatter: function(value, row, index) {
        if (value == 1) {
          return '<button class="btn btn-primary btn-sm" type="button">正常</button>';
        } else if (value == 0) {
          return '<button class="btn btn-secondary btn-sm" type="button">不显示</button>';
        }
      },
    },
    {
      field: 'operate',
      title: '操作',
      align: 'center',
      events: {
        'click .role-add': function(e, value, row, index) {
          add(row.id);
        },
        'click .role-delete': function(e, value, row, index) {
          del(row.id);
        },
        'click .role-edit': function(e, value, row, index) {
          update(row.id);
        }
      },
      formatter: operateFormatter
    }
  ],

  treeShowField: 'title',
  parentIdField: 'pid',

  onResetView: function(data) {
    $treeTable.treegrid({
      initialState: 'collapsed', // 所有节点都折叠
      treeColumn: 1,
      //expanderExpandedClass: 'mdi mdi-folder-open',  // 可自定义图标样式
      //expanderCollapsedClass: 'mdi mdi-folder',
    });

    // 只展开树形的第一集节点
    $treeTable.treegrid('getRootNodes').treegrid('expand');
  },
  onCheck: function(row) {
    var datas = $treeTable.bootstrapTable('getData');

    selectChilds(datas, row, 'id', 'pid', true); // 选择子类

    selectParentChecked(datas, row, 'id', 'pid'); // 选择父类

    $treeTable.bootstrapTable('load', datas);
  },

  onUncheck: function(row) {
    var datas = $treeTable.bootstrapTable('getData');
    selectChilds(datas, row, 'id', 'pid', false);
    $treeTable.bootstrapTable('load', datas);
  },
});

// 操作按钮
function operateFormatter(value, row, index) {
  return [
    '<a type="button" class="role-add btn btn-xs btn-default m-r-5" title="编辑" data-toggle="tooltip"><i class="mdi mdi-plus"></i></a>',
    '<a type="button" class="role-edit btn btn-xs btn-default m-r-5" title="修改" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>',
    '<a type="button" class="role-delete btn btn-xs btn-default" title="删除" data-toggle="tooltip"><i class="mdi mdi-delete"></i></a>'
  ].join('');
}

/**
 * 选中父项时，同时选中子项
 * @param datas 所有的数据
 * @param row 当前数据
 * @param id id 字段名
 * @param pid 父id字段名
 */
function selectChilds(datas, row, id, pid, checked) {
  for (var i in datas) {
    if (datas[i][pid] == row[id]) {
      datas[i].check = checked;
      selectChilds(datas, datas[i], id, pid, checked);
    };
  }
}

function selectParentChecked(datas, row, id, pid) {
  for (var i in datas) {
    if (datas[i][id] == row[pid]) {
      datas[i].check = true;
      selectParentChecked(datas, datas[i], id, pid);
    };
  }
}

function add(id) {
  openLayer('新增栏目', '/admin/admin/addAuthRule?pid='+id);
}

function del(id) {
  layer.confirm('删除可能会把子菜单一并删除，确定要删除吗?', function(index){
    $.post('/admin/admin/delAuthRule',{id:id},function(res)
    {
        if(res.code == 200)
        {
            showNotify(res.msg, 'success', 1000, 'mdi mdi-emoticon-happy', 'top', 'right');
        }else{
            showNotify(res.msg, 'danger', 1000, 'mdi mdi-information-outline', 'top', 'right');
        }
    })
    layer.close(index);
  });  
}

function update(id) {
  //alert("update 方法 , id = " + id);
  openLayer('编辑栏目', '/admin/admin/editAuthRule?id='+id);
}

//批量操作
function batch() {
  var selRows = $treeTable.bootstrapTable("getSelections");
  if (selRows.length == 0) {
    alert("请至少选择一行");
    return;
  }
  console.log(selRows);

  var postData = "";
  $.each(selRows, function(i) {
    postData += this.id;
    if (i < selRows.length - 1) {
      postData += "， ";
    }
  });
  alert("你选中行的 id 为：" + postData);
}
</script>
</body>
</html>
